<template>
	<view style="padding-bottom: 50px;">
		<uni-nav-bar :title="$t('personal.text6')" :fixed="true" :border="false"
			backgroundColor="var(--theme-color)" color="var(--theme-text-color)"></uni-nav-bar>
		<view class="icon-xl circle flex-center back-btn" style="position: fixed;top: 5px;left: 16px;z-index: 100;"
			@click="backPage">
			<uni-icons type="arrow-left" size="24" color="#fff"></uni-icons>
		</view>
		<view class="content mt20 p-lr-16">
			<uni-forms :modelValue="cjInfo" ref="cjRule" label-position="top" labelWidth="auto" :rules="rules">
				<uni-forms-item>
					<view class="flex-c card-inp">
						<text class="fs12">{{$t('rj_price')}}</text>
						<view class="mt10 flex" style="border-bottom: 1px solid #ccc;">
							<input class="uni-input" type="number" @input="InputEventMoney" focus v-model="cjInfo.money" />
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item :label="$t('rj_type')">
					<view class="card-inp flex-between" @click="openPopup">
						<text style="font-size: 15px;">{{list[selecedIndex].name}}</text>
						<uni-icons type="right" size="16"></uni-icons>
					</view>
				</uni-forms-item>
				<uni-forms-item>
					<view class="price-box1" v-show="selecedIndex==0 || selecedIndex == 1">
						<view :class="['usdt-item',choosePriceBtn === item?'usdt-item-active':'']" v-for="(item,index) in arr2" :key="index" @click="choosePrice(item)">
							{{ item }}-USDT
						</view>
					</view>
					<view class="price-box2" v-show="selecedIndex==2 || selecedIndex == 3">
						<view :class="['usdt-item',choosePriceBtn === item?'usdt-item-active':'']" v-for="(item,index) in arr" :key="index" @click="choosePrice(item)">
							{{selecedIndex==2?'HKD':'￥ '}}{{ item }}
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item>
					<button :class="['btn-submit', disabled?'login-btn-disabled':'login-btn']" :disabled="disabled"
						v-debounce:500="submitForm">{{$t('confirm_rj')}}</button>
				</uni-forms-item>
			</uni-forms>
		</view>
		<uni-popup ref="popup" type="bottom" safeArea borderRadius="10px 10px 0 0" background-color="var(--theme-box-bg)">
			<view class="popup-content">
				<view class="flex-between p-lr-16">
					<text class="fs16 fb">{{$t('rj_type')}}</text>
					<text class="text-md text-des-color" @click="closePopup">{{$t('cancel')}}</text>
				</view>
				<scroll-view scroll-y="true" class="scroll-Y" style="height: 35vh;margin-top: 20px;"
					:show-scrollbar="false">
					<view class="fs14">
						<view
							:class="['flex-between','item','p-lr-16',selecedIndex==index?'highlight-color selected':'']"
							v-for="(item,index) in list" :key="index" @click="setType(index)">
							<view class="">{{item.name}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<uni-popup ref="popup2" :style="{'z-index':1031}" type="center" background-color="var(--theme-box-bg)">
			<view class="buyInfo fs14">
				<view class="" style="padding: 24px 24px 0 20px;">
					<view v-show="!errorMsg" class="flex-column" style="justify-content: center;">
						<uni-icons type="checkbox" color="#25bc73" style="font-weight: bold;" size="36"></uni-icons>
						<text>{{$t('personal.text26')}}</text>
					</view>
					<view v-show="errorMsg" class="flex-column" style="justify-content: center;">
						<uni-icons type="close" color="#f33b50" style="font-weight: bold;" size="36"></uni-icons>
						<text> {{errorMsg}}</text>
					</view>
				</view>
				<view class="btn-group fs14 mt10">
					<view class="btn-b" @click="dialogConfirm">
						<text>ok</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- <SoundFeedback ref="soundFeedback" src="/static/audio/xm3463.mp3" /> -->
	</view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref,
		watch
	} from 'vue';
	import {
		onUnload
	} from '@dcloudio/uni-app'
	import {
		rechargeCreate,
		getMyAddress
	} from '../../../api/index.js'
	import useGlobalProperties from '../../../utils/useGlobalProperties.js'
	// import SoundFeedback from '@/components/SoundFeedback.vue';
	import {
		hideBankCode
	} from '../../../utils/utils.js'
	const {
		$t,
		$i18n
	} = useGlobalProperties()
	const backPage = () => {
		history.back()
	}
	const userIndex = ref({})
	const isReal = ref(true)
	const disabled = ref(true)
	const selecedIndex = ref(0)
	const popup = ref(null)
	const popup2 = ref(null)
	const errorMsg = ref('')
	const list = [{
			name: 'USDT-TRC20',
			value: '2'
		},
		{
			name: 'USDT-ERC20',
			value: '3'
		},
		{
			name: $t('hktype'),
			value: '4'
		},
		{
			name: $t('rmbtype'),
			value: '5'
		},
	]
	const arr = [1000, 2000, 5000, 10000, 20000, 50000, 100000, 200000, 500000]
	const arr2 = [200, 300, 500, 2000, 3000, 5000, 20000, 30000, 50000]
	const choosePriceBtn = ref()
	const cjInfo = ref({
		money: "",
		cjtype: 2,
		payPwd: '',
	})
	const rules = ref({
		money: {
			rules: [{
				required: true,
				errorMessage: $t('enter') + $t('rj_price'),
			}, ],
			validateTrigger: 'blur'
		},
		// payPwd: { rules:[ { required: true, errorMessage: $t('enter')+$t('payPwd'), }], validateTrigger:'blur'}
	})
	const soundFeedback = ref(null);
	const setType = (index) => {
		selecedIndex.value = index
		cjInfo.value.cjtype = list[index].value
		choosePriceBtn.value = null
		closePopup();
	}
	const choosePrice = (num) =>{
		choosePriceBtn.value = num
		cjInfo.value.money = num
		disabled.value = false
	}
	const InputEventMoney = (event) =>{
		// console.log('event',event.detail.value);
		if(event.detail.value){
			choosePriceBtn.value = null
			disabled.value = false
		}else{
			disabled.value = true
		}
		
	}
	// const status = Number(uni.getStorageSync('ISREALID'))
	const submitForm = () => {
		rechargeCreate({
			type: cjInfo.value.cjtype,
			price: cjInfo.value.money
		}).then(res => {
			// console.log(res);
			uni.showToast({
				title: res.msg,
				icon: 'none',
				duration: 5000
			})
			// soundFeedback.value.playSound(); // 请求成功后播放声音
			if(res.code == 1){
				// setTimeout(()=>{
					uni.reLaunch({
						url:'/pages/personal/deposit-list/deposit-list'
					})
				// },1500)
			}
			// else{
			// 	errorMsg.value = res.msg
			// 	popup2.value.open()
			// }
		})
	}
	const dialogConfirm = () => {
		popup2.value.close()
		if (!errorMsg.value) {
			backPage();
		}
	}
	// 关闭弹窗
	const openPopup = () => {
		popup.value.open();
	};
	// 关闭弹窗
	const closePopup = () => {
		popup.value.close();
	};
	// 注册监听
	uni.$on('userInfoUpdated', (userInfo) => {
		// console.log('User info updated:', userInfo);
		// 更新页面中的数据
		userIndex.value = userInfo;
	});

	// 页面销毁时移除监听
	onUnload(() => {
		uni.$off('userInfoUpdated');
	})
	onMounted(() => {
		userIndex.value = uni.getStorageSync('USERINDEX')
	})
</script>

<style scoped lang="scss">
	.card-inp {
		background: linear-gradient(125deg, var(--theme-box-bg), var(--theme-box-bg));
		padding: 12px 24px;
		border-radius: 12px;
	}

	.flex-c {
		display: flex;
		flex-direction: column;
	}

	uni-input {
		font-size: 30px !important;
	}

	.box {
		background-color: #f4eadd;
		color: #fc6d22;
	}

	.popup-content {
		padding-top: 15px;
		min-height: 100px;
		background-color: var(--theme-box-bg);
		border-radius: 15px 15px 0 0;
		position: relative;

		.item {
			height: 52px;
			border-top: 1px solid #eee;
		}
	}

	::v-deep uni-button:after {
		border: none !important;
	}

	.buyInfo {
		width: 220px;
		min-height: 100px;
		background-color: var(--theme-box-bg);
		border-radius: 12px;
		box-sizing: border-box;
	}

	.btn-group {
		display: flex;
		flex-direction: row;
		border-top-color: #f5f5f5;
		border-top-style: solid;
		border-top-width: 1px;
	}

	.btn-b {
		display: flex;
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 45px;
	}

	.price-box1 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 10px 20px;
		/* 行间距 列间距 的简写 */
	}

	.price-box2 {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 10px 20px;
	}

	.usdt-item {
		line-height: 35px;
		// border: 1px solid rgba(0, 0, 0, 0.2);
		border-radius: 4px;
		background: var(--theme-box-bg);
		text-align: center;
	}
	.usdt-item-active{
		background: #00aaff;
		color: #fff;
	}
</style>